<template>
  <el-tabs type="border-card" style="heigt: 100%">
    <!-- 第一组查询 刷卡记录查询 -->
    <el-tab-pane label="刷卡记录查询">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSwingCardRecordNum()"
          type="primary"
          size="small"
        >
          统计记录数
        </el-button>
        <el-button
          style="float: right; margin-bottom: 15px; margin-right: 15px"
          @click="handleSwingCardRecordForm()"
          type="primary"
          size="small"
        >
          查询记录
        </el-button>
      </div>
      <!-- 第一组查询 刷卡记录查询  表单部分-->
      <el-form
        inline
        v-model="swingCardRecordForm"
        :rules="swingCardRecordFormRules"
        size="small"
        label-width="140px"
        style="margin-top: 15px"
      >
        <el-form-item label="卡类型">
          <el-input
            v-model="swingCardRecordForm.category"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input
            v-model="swingCardRecordForm.cardNumber"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门id" prop="deptIds">
          <el-input
            v-model="swingCardRecordForm.deptIds"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="人员编号">
          <el-input
            v-model="swingCardRecordForm.personCode"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="通道编码">
          <el-input
            v-model="swingCardRecordForm.channelCode"
            style="width: 203px"
          ></el-input>
        </el-form-item>
        <el-form-item label="查询起始时间">
          <el-date-picker
            v-model="swingCardRecordForm.startSwingTime"
            type="datetime"
            placeholder="选择起始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 203px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="查询截至时间">
          <el-date-picker
            v-model="swingCardRecordForm.endSwingTime"
            type="datetime"
            placeholder="选择截至时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 203px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件类型">
          <el-select
            v-model="swingCardRecordForm.enterOrExit"
            placeholder="请选择"
            style="width: 203px"
            clearable
          >
            <el-option
              v-for="item in enterOrExitOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开门结果">
          <el-select
            v-model="swingCardRecordForm.openResult"
            placeholder="请选择"
            style="width: 203px"
            clearable
          >
            <el-option
              v-for="item in openResultOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="体温类型">
          <el-select
            v-model="swingCardRecordForm.isOverTemp"
            placeholder="请选择"
            style="width: 203px"
            clearable
          >
            <el-option
              v-for="item in isOverTempOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="体温范围">
          <el-input
            v-model="swingCardRecordForm.curTempStart"
            style="width: 203px"
            placeholder="最低温度"
          ></el-input>
        </el-form-item>
        <el-form-item l>
          <el-input
            v-model="swingCardRecordForm.curTempEnd"
            style="width: 203px"
            placeholder="最高温度"
          ></el-input>
        </el-form-item>
      </el-form>
      <!--第一组查询  刷卡记录查询 以dialog返回记录数 -->
      <el-dialog title="符合条件的记录数" :visible.sync="isDialogShow">
        {{ swingCardRecordNum }}
      </el-dialog>
      <!--第一组查询 刷卡记录查询  结果显示   -->
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 记录列表</span>
        <el-table
          :data="swingCardRecordResult"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed prop="id" label="记录id"></el-table-column>
          <el-table-column label="卡状态 ">
            <template slot-scope="scope">
              {{ scope.row.cardStatus | cardStatusFilter }}
            </template>
          </el-table-column>

          <el-table-column label="卡类型">
            <template slot-scope="scope">
              {{ scope.row.cardType | cardTypeFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="channelName"
            label="通道名称"
          ></el-table-column>
          <el-table-column
            prop="channelCode"
            label="通道编码"
          ></el-table-column>
          <el-table-column prop="deviceName" label="设备名称"></el-table-column>
          <el-table-column prop="deviceCode" label="设备编码"></el-table-column>
          <el-table-column prop="deptName" label="部门名称"></el-table-column>
          <el-table-column prop="cardNumber" label="卡号"></el-table-column>
          <el-table-column prop="enterOrExit" label="进出门"></el-table-column>
          <el-table-column prop="openResult" label="开门结果"></el-table-column>
          <el-table-column prop="openType" label="开门类型"></el-table-column>
          <el-table-column
            prop="paperNumber"
            label="证件号码"
            width="180px"
          ></el-table-column>
          <el-table-column prop="personCode" label="人员编号"></el-table-column>
          <el-table-column prop="personId" label="人员ID"></el-table-column>
          <el-table-column prop="personName" label="人员名称"></el-table-column>
          <el-table-column prop="swingTime" label="刷卡时间"></el-table-column>
        </el-table>
      </div>
    </el-tab-pane>

    <!-- 第二组查询 -->

    <el-tab-pane label="认证记录查询">
      <div>
        <i class="el-icon-search"></i>
        <span>认证记录</span>
        <el-button
          style="float: right; margin-bottom: 15px; margin-right: 15px"
          @click="handlecardSolutionIntegrateForm()"
          type="primary"
          size="small"
        >
          查询记录
        </el-button>
      </div>
      <div>
        <el-form
          inline
          v-model="cardSolutionIntegrateForm"
          size="small"
          label-width="140px"
          style="margin-top: 15px"
        >
          <el-form-item label="对比结果">
            <el-select
              v-model="cardSolutionIntegrateForm.compareResult"
              placeholder="请选择"
              style="width: 203px"
            >
              <el-option
                v-for="item in compareResultOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input
              v-model="cardSolutionIntegrateForm.deviceName"
              style="width: 203px"
            ></el-input>
          </el-form-item>
          <el-form-item label="人员名称">
            <el-input
              v-model="cardSolutionIntegrateForm.personName"
              style="width: 203px"
            ></el-input>
          </el-form-item>
          <br />
          <el-form-item label="查询起始时间">
            <el-date-picker
              v-model="cardSolutionIntegrateForm.startTime"
              type="datetime"
              placeholder="选择起始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 203px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="查询截至时间">
            <el-date-picker
              v-model="cardSolutionIntegrateForm.endTime"
              type="datetime"
              placeholder="选择截至时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 203px"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <!-- 第二组查询 结果显示 -->
      <div>
        <el-divider></el-divider>
        <i class="el-icon-tickets"></i>
        <span> 记录列表</span>
        <el-table
          :data="cardSolutionIntegrateResult"
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column fixed label="记录id">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>
          <el-table-column label="对比结果">
            <template slot-scope="scope">
              {{ scope.row.compareResult }}
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="180px">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column label="设备名称" width="120px">
            <template slot-scope="scope">
              {{ scope.row.deviceName }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="120px">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="证件号" width="180px">
            <template slot-scope="scope">
              {{ scope.row.paperNumber }}
            </template>
          </el-table-column>
          <el-table-column label="性别" width="120px">
            <template slot-scope="scope">
              {{ scope.row.sex }}
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="80px">
            <template slot-scope="scope">
              {{ scope.row.age }}
            </template>
          </el-table-column>
          <el-table-column label="省份" width="80px">
            <template slot-scope="scope">
              {{ scope.row.address }}
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="240px">
            <template slot-scope="scope">
              <el-button
                @click="getFacePhotoUrl(scope.row)"
                type="primary"
                size="small"
              >
                查看抓拍照片
              </el-button>
              <el-button
                @click="getPaperNumberPhotoUrl(scope.row)"
                type="primary"
                size="small"
              >
                查看证件照片
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="抓拍照片" width="50%" :visible.sync="isPhoto" center>
          <template slot-scope="scope">
            <el-image :src="scope.row.recordImage"> </el-image>
          </template>
        </el-dialog>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import {
  getSwingCardSolution,
  getSwingCardSolutionBycondition,
  getCardSolutionIntegrate,
} from "@/api/swingcardsolution";

export default {
  filters: {
    cardStatusFilter(status) {
      let cardStatus = [
        "ACTIVE/激活",
        "BLANK/空白",
        "FROZEN/冻结",
        "WITHDRAWN/注销",
      ];
      return cardStatus[status];
    },
    cardTypeFilter(type) {
      let cardTypes = ["普通卡", "VIP卡", "来宾"];
      return cardTypes[type];
    },
  },
  data() {
    return {
      isPhoto: false,
      swingCardRecordForm: {
        //刷卡记录查询的表单
        pageNum: 1,
        pageSize: 20,
        startSwingTime: "",
        endSwingTime: "",
        category: "",
        deptIds: undefined,
        cardNumber: "",
        personCode: "",
        enterOrExit: undefined,
        openResult: 1,
        channelCode: "",
        openStyle: 1,
        isOverTemp: "",
        curTempStart: "",
        curTempEnd: "",
      },
      enterOrExitOptions: [
        //enterOrExit <int> 1:in 2:out
        {
          value: 1,
          label: "进门",
        },
        {
          value: 2,
          label: "出门",
        },
      ],
      openResultOptions: [
        //openResult <int> 1:success 0:fail
        {
          value: 1,
          label: "成功",
        },
        {
          value: 0,
          label: "失败",
        },
      ],
      isOverTempOptions: [
        {
          value: "0",
          label: "超温",
        },
      ],
      compareResultOptions: [
        // compareResult <boolean> true:success false: fail
        {
          value: true,
          label: "成功",
        },
        {
          value: false,
          label: "失败",
        },
      ],
      swingCardRecordFormRules: {
        pageNum: [
          { required: true, message: "需要填写页码数", trigger: "blur" },
        ],
        pageSize: [
          { required: true, message: "需要填写页码大小", trigger: "blur" },
        ],
        deptIds: [
          { required: true, message: "必须填写部门id", trigger: "blur" },
        ],
      },
      swingCardRecordResult: null,
      // {
      //   currentPage: 1,
      //   pageData: [
      //     {
      //       cardNumber: "444BA052",
      //       cardStatus: 0,
      //       CardType: 0,
      //       channelCode: "1000005$7$0$0",
      //       channelName: "130考勤_通道1",
      //       deptName: "导入导出测试部门",
      //       deviceCode: "1000005",
      //       deviceName: "130考勤",
      //       enterOrExit: 3,
      //       id: "557943396015017984",
      //       openResult: 1,
      //       openType: 51,
      //       paperNumber: "50811",
      //       personCode: "50811",
      //       personId: 9,
      //       personName: "mk",
      //       recordImage:
      //         "http://10.35.120.11:50000/4c4e3ced-ea38-11e8-9007-14a78b2eaba0/20190320/2/dsf_22f96d4f-4ab8-11e9-8889-14a78b2eaba0_1735726_1745772.jpg",
      //       swingTime: "2019-03-20 23:04:44",
      //     },
      //     {
      //       cardNumber: "444BA052",
      //       cardStatus: 0,
      //       cardType: 0,
      //       channelCode: "1000005$7$0$0",
      //       channelName: "130考勤_通道1",
      //       deptName: "导入导出测试部门",
      //       deviceCode: "1000005",
      //       deviceName: "130考勤",
      //       enterOrExit: 3,
      //       id: "557942736599126016",
      //       openResult: 1,
      //       openType: 51,
      //       paperNumber: "50811",
      //       personCode: "50811",
      //       personId: 9,
      //       personName: "mk",
      //       recordImage:
      //         "http://10.35.120.11:50000/4c4e3ced-ea38-11e8-9007-14a78b2eaba0/20190320/2/dsf_22f96d4f-4ab8-11e9-8889-14a78b2eaba0_1724051_1735726.jpg",
      //       swingTime: "2019-03-20 23:02:07",
      //     },
      //     {
      //       cardNumber: "F744B096",
      //       cardStatus: 0,
      //       channelCode: "1000001$7$0$0",
      //       channelName: "132_通道1",
      //       deviceCode: "1000001",
      //       deviceName: "132",
      //       enterOrExit: 1,
      //       id: "557939825236250624",
      //       openResult: 0,
      //       openType: 52,
      //       recordImage:
      //         "http://10.35.120.11:50000/4c4e3ced-ea38-11e8-9007-14a78b2eaba0/20190320/2/dsf_22f96d4f-4ab8-11e9-8889-14a78b2eaba0_1594285_1613506.jpg",
      //       swingTime: "2019-03-20 14:53:38",
      //     },
      //   ],
      //   pageSize: 20,
      //   totalPage: 0,
      //   totalRows: 0,
      // },
      isShowSwingCardRecordResult: false,
      swingCardRecordNum: 30,
      isDialogShow: false,

      cardSolutionIntegrateForm: {
        compareResult: "",
        deviceName: "",
        personName: "",
        pageNum: 1,
        pageSize: 20,
        startTime: "",
        endTime: "",
      },
      cardSolutionIntegrateResult: null,
      //  {
      //   currentPage: 1,
      //   pageData: [
      //     {
      //       address: "浙江",
      //       age: 26,
      //       compareResult: "比对成功",
      //       createTime: "2019-06-12 18:59:26",
      //       deviceName: "134",
      //       id: 3,
      //       name: "何振渔",
      //       paperNumber: "330682199311204452",
      //       sex: "男",
      //     },
      //     {
      //       address: "浙江",
      //       age: 26,
      //       compareResult: "比对成功",
      //       createTime: "2019-06-12 18:49:00",
      //       deviceName: "134",
      //       id: 2,
      //       name: "何振渔",
      //       paperNumber: "330682199311204452",
      //       sex: "男",
      //     },
      //     {
      //       address: "安徽",
      //       age: 28,
      //       compareResult: "比对成功",
      //       createTime: "2019-06-12 16:03:19",
      //       deviceName: "134",
      //       id: 1,
      //       name: "陈凯",
      //       paperNumber: "342623199110120336",
      //       sex: "男",
      //     },
      //   ],
      //   pageSize: 20,
      //   totalPage: 1,
      //   totalRows: 3,
      // },
      logTalkForm: {
        pageNum: 1,
        pageSize: 20,
        callNum: "",
        endState: 0,
        callType: 0,
        startTime: "",
        endTime: "",
      },
      logTalkResult: {},
    }; // return's }
  },
  created() {
    this.getSwingCard();
    this.getAllCardSolutionIntegrate();
  },
  methods: {
    getSwingCard() {
      getSwingCardSolution(this.swingCardRecordForm).then((response) => {
        this.swingCardRecordResult = response.data.items;
      });
    },
    getAllCardSolutionIntegrate() {
      console.log(this.cardSolutionIntegrateForm);

      getCardSolutionIntegrate(this.cardSolutionIntegrateForm).then(
        (response) => {
          this.cardSolutionIntegrateResult = response.data.items;
        }
      );
    },
    handleSwingCardRecordForm() {
      this.isShowSwingCardRecordResult = true;
      console.log(this.swingCardRecordForm);
      getSwingCardSolutionBycondition(this.swingCardRecordForm).then(
        (response) => {
          // console.log("------1——");
          // console.log(response);
          this.swingCardRecordResult = response.data.items;
          // console.log("___________________________-");
          // console.log(this.swingCardRecordResult);
        }
      );
    },
    handleSwingCardRecordNum() {
      this.isDialogShow = true;
    },
    handlecardSolutionIntegrateForm() {},
    getFacePhotoUrl(row) {
      this.isPhoto = true;
    },
    getPaperNumberPhotoUrl(row) {},
  },
};
</script>

<style scoped>
</style>